<template>
    <div class="header-left">
        <el-row class="tac">
            <el-col :span="6">
                <p  style="margin: 0;line-height: 40px;background-color: #e02727;color:white">后台管理系统</p>
            </el-col>
            <el-col :span="18">
                <div class="control">
                    <a  style="margin: 0;line-height: 40px;text-decoration:none;color:#e02727" href="/#/control">控制面板</a>
                    <div class="control-left">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                皮肤<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>红</el-dropdown-item>
                                <el-dropdown-item>黄</el-dropdown-item>
                                <el-dropdown-item>蓝</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>红</el-dropdown-item>
                                <el-dropdown-item>黄</el-dropdown-item>
                                <el-dropdown-item>蓝</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <a>登陆/注销</a>

                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            username:"hel"
        }
    }
}
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #e02727;
    font-size: 15px;
  }
  .el-icon-arrow-down {
    font-size: 15px;
  }
  .header-left{
      border-bottom: 1px solid #d0c8c8;
  }
  .control{
      margin:0 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
  }
  .control-left{
      width:300px;
      display: flex;
      justify-content: space-around;
      align-items: center;
  }
</style>